<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增文物管理')" />
    <th:block th:include="include :: cropper-css" />
	<style type='text/css'>
	/* avator css start */
	.container {
		margin: 10px 5px 5px 5px;
	}
	
	.action {
		padding: 5px 0px;
	}
	
	.cropped {
		width: 200px;
		border: 1px #ddd solid;
		box-shadow: 0px 0px 12px #ddd;
	}
	
	.img-preview {
		border-radius: 50%;
		box-shadow: 0px 0px 12px #7e7e7e;
		display: inline-block;
	}
	
	.preview-box {
		text-align: center;
		margin: 0px auto;
		margin-top: 10px;
		color: #bbb;
	}
	
	.preview-md {
		width: 128px;
		height: 128px;
	}
	
	.preview-sm {
		width: 96px;
		height: 96px;
	}
	
	.preview-xs {
		width: 64px;
		height: 64px;
	}
	
	.imageBox {
		border: 1px solid #aaa;
		overflow: hidden;
		cursor: move;
		box-shadow: 4px 4px 12px #B0B0B0;
		margin: 0px auto;
	}
	
	.btn-custom {
		float: right;
		width: 46px;
		display: inline-block;
		margin-bottom: 10px;
		height: 37px;
		line-height: 37px;
		font-size: 14px;
		color: #FFFFFF;
		margin: 0px 2px;
		background-color: #f38e81;
		border-radius: 3px;
		text-decoration: none;
		cursor: pointer;
		box-shadow: 0px 0px 5px #B0B0B0;
		border: 0px #fff solid;
	}
    /*选择文件上传*/
	.new-contentarea {
		width: 165px;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		float: left;
	}
	
	.new-contentarea label {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.new-contentarea input[type=file] {
		width: 188px;
		height: 60px;
		background: #333;
		margin: 0 auto;
		position: absolute;
		right: 50%;
		margin-right: -94px;
		top: 0;
		right/*\**/: 0px\9;
		margin-right/*\**/: 0px\9;
		width/*\**/: 10px\9;
		opacity: 0;
		filter: alpha(opacity=0);
		z-index: 2;
	}
	
	a.upload-img {
		width: 165px;
		display: inline-block;
		margin-bottom: 10px;
		height: 37px;
		line-height: 37px;
		font-size: 14px;
		color: #FFFFFF;
		background-color: #f38e81;
		border-radius: 3px;
		text-decoration: none;
		cursor: pointer;
		border: 0px #fff solid;
		box-shadow: 0px 0px 5px #B0B0B0;
	}
	
	a.upload-img:hover {
		background-color: #ec7e70;
	}
	
	.tc {
		text-align: center;
	}
    /* avator css end */
	</style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-exhibit-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">文物名：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">文物类型：</label>
                <div class="col-sm-8">
                    <select name="typeId" class="form-control m-b" th:with="type=${@exhibitType.getType()}" required>
                    	<option value="">无分类</option>
                        <option th:each="eh : ${type}" th:text="${eh.name}" th:value="${eh.id}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">3D链接：</label>
                <div class="col-sm-8">
                    <textarea name="url" class="form-control" required></textarea>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label is-required">所属博物馆：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="museum" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">描述信息：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control" required></textarea>
                </div>
            </div>
<!--             <div class="form-group">     -->
<!--                 <label class="col-sm-3 control-label is-required">是否展示：</label> -->
<!--                 <div class="col-sm-8"> -->
<!--                     <input name="isShow" class="form-control" type="text"> -->
<!--                 </div> -->
<!--             </div> -->
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">是否重点文物：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('mus_exhibit_important')}">
                        <input type="radio" th:id="${dict.dictCode}" name="isImportant" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
<!--             <div class="form-group"> -->
<!--                 <label class="col-sm-3 control-label is-required">图片：</label> -->
<!--                 <div class="col-sm-8"> -->
<!--                     <div class="file-loading"> -->
<!--                         <input id="exhibitFile" name="file" class="file" type="file" data-min-file-count="1" data-theme="fas"> -->
<!--                     </div> -->
<!--                 </div> -->
<!--             </div> -->
			<!-- <div class="form-group">
		    <label class="col-sm-3 control-label">图片：</label>
				<div class="col-sm-8">
					<div class="file-loading">
						<input id="exhibitFile" type="file" class="file" name="file" required>
					</div>
				</div>
			</div> -->
			<div class="form-group">
		    	<label class="col-sm-3 control-label"></label>
				<div class="col-sm-8">
					<!-- <div class="file-loading">
						<img id="img" th:src="*{img}" style="width: 60%; height:60%;">
					</div> -->
					
					<div class="imageBox">
						<img id="img" th:src="*{img}" th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''">
					</div>
					<div class="action">
						<div class="new-contentarea tc">
							<a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
							<input type="file" name="avatar" id="inputImage" accept="image/*"/>
						</div>
						<button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>
						<button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>
						<button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i class="fa fa-rotate-left"></i></button>
						<button type="button" class="btn-custom" data-method="rotate" data-option="45"><i class="fa fa-rotate-right"></i></button>
						<button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i class="fa fa-arrows-h"></i></button>
						<button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i class="fa fa-arrows-v"></i></button>
						<button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i></button>
					</div>
				</div>
			</div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: cropper-js" />
    <script th:inline="javascript">
        $(document).ready(function () {
        	$("#exhibitFile").change(function(){
				var file = this.files[0];
				if (window.FileReader) {    
					var reader = new FileReader();    
				    reader.readAsDataURL(file);    
			    	reader.onloadend = function (e) {
			    		$("#img").val(e.target.result);
			       		$("#img").attr("src", e.target.result);
			       	};    
			    } 
			});
        	var image = document.getElementById('img');
			cropper = new Cropper(image, {
				aspectRatio: 1,
				viewMode: 0,
				autoCropArea: 1,
				preview: '.img-preview',
				ready: function () {
					croppable = true;
				}
			})
			$('#inputImage').on('change', function() {
				var reader = new FileReader();
				var file = $('#inputImage')[0].files[0];
				if (/^image\/\w+$/.test(file.type)) {
					reader.onload = function(e) {
						if(croppable){
							cropper.replace(e.target.result)
						}
					}
					reader.readAsDataURL(this.files[0]);
				} else {
					$.modal.alertWarning('请选择一个图片文件。');
				}
			});
			$('.btn-custom').on('click',function (e) {
				if (!croppable) {
					$.modal.alertWarning("裁剪框加载中,请稍后...");
					return;
				}
				var data = {
					method: $(this).data('method'),
					option: $(this).data('option') || undefined,
				};
				var result = cropper[data.method](data.option, data.secondOption);
				if(['scaleX','scaleY'].indexOf(data.method) !== -1){
					$(this).data('option', -data.option)
				}
			})
        });
        var prefix = ctx + "museum/exhibit"
        $("#form-exhibit-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
        	if ($.validate.form()) {
	            var formdata = new FormData($("#form-exhibit-add")[0]);
	            if (!croppable) {
	                $.modal.alertWarning("裁剪框加载中,请稍后...");
	                return
	            }
	            cropper.getCroppedCanvas({
	            	width:800,//输出画布的目标宽度
	                height:800,//输出画布的目标高度。
	                minWidth:800,//输出画布的最小目标宽度，默认值为0。
	                minHeight:800,//输出画布的最小目标高度，默认值为0。
	                maxWidth:800,//输出画布的最大目标宽度，默认值为Infinity(无穷大)。
	                maxHeight:800,//输出画布的最大目标高度，默认值为Infinity(无穷大)。
	            }).toBlob(function(img) {
	                formdata.append("file", img);
	                $.ajax({
	                	url: prefix + "/add",
		                data: formdata,
		                type: "post",
		                processData: false,
		                contentType: false,
		                success: function(result) {
		                    $.operate.saveSuccess(result);
		                }
	                })
	            });
        	}
        }
        
        $(window).resize(function() {
            $('.imageBox').height(400);
            $('.cropped').height($(window).height() - 40);
        }).resize();

        if (!HTMLCanvasElement.prototype.toBlob) {
            Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
                value: function(callback, type, quality) {
                    var canvas = this;
                    setTimeout(function() {
                        var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                        var len = binStr.length;
                        var arr = new Uint8Array(len);
                        for (var i = 0; i < len; i++) {
                            arr[i] = binStr.charCodeAt(i);
                        }
                        callback(new Blob([arr], {
                            type: type || 'image/png'
                        }));
                    });
                }
            });
        }


    </script>
</body>
</html>